<template>
    <div class="c-info c-first">
        <c-person title="小学组" :video="video1"></c-person>
        <c-person title="初中组" :video="video2"></c-person>
        <c-person title="高中组" :video="video3"></c-person>
        <c-person title="大学组" :video="video4"></c-person>
    </div>
</template>

<script>
    import { cPerson } from '../../../components/main';
    export default {
        name:'dynamic',

        data() {
            return {
                video1:[],
                video2:[],
                video3:[],
                video4:[]
            }
        },

        components:{
            cPerson
        },

        mounted() {
            [1,2,3,4].forEach(type => {
                this.axios.get('show',{params:{type}})
                .then(data => {
                    data = data.data;
                    this[`video${type}`] = data;
                 })
            })
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import "../../../plugins/assets/css/flex.less";
    .c-first{
        width: 50%;
        margin: 50px auto;
    }

    @media screen and (max-width: 768px) {
        .c-first{
            width: 90%;
            margin: 50px auto;
        }
    }
</style>